<template>
  <!-- 数据统计表 -->
  <main class="container p-4">
    <div class="grid grid-cols-4 gap-4 mt-4">
      <!-- 基本信息 -->
      <div
          class="col-span-1  cursor-default block max-w-96 p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
        <div class="flex items-center justify-start">
          <svg t="1710663707909" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="27915" width="33" height="33">
            <path
                d="M640 384 384 384C348.8 384 320 355.2 320 320L320 320C320 284.8 348.8 256 384 256L640 256C675.2 256 704 284.8 704 320L704 320C704 355.2 675.2 384 640 384"
                fill="#E88831" p-id="27916"></path>
            <path
                d="M640 576 384 576C348.8 576 320 547.2 320 512L320 512C320 476.8 348.8 448 384 448L640 448C675.2 448 704 476.8 704 512L704 512C704 547.2 675.2 576 640 576"
                fill="#E88831" p-id="27917"></path>
            <path
                d="M704 640C633.6 640 576 697.6 576 768L576 896 224 896C206.336 896 192 881.664 192 864L192 160C192 142.336 206.336 128 224 128L800 128C817.664 128 832 142.336 832 160L832 640 704 640ZM832 0 192 0C121.6 0 64 57.6 64 128L64 896C64 966.4 121.6 1024 192 1024L613.504 1024C630.464 1024 646.72 1017.28 658.752 1005.248L941.248 722.752C953.28 710.72 960 694.464 960 677.504L960 128C960 57.6 902.4 0 832 0L832 0Z"
                fill="#E88831" p-id="27918"></path>
          </svg>
          <h5 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white ml-2">文章</h5>
        </div>
        <p class="font-normal text-gray-700 dark:text-gray-400 justify-start flex text-5xl" style="margin-top: 10px">
          <CountTO :value="statisticsBaseInfo.articleTotalCount"/>
        </p>
      </div>
      <div
          class="col-span-1  cursor-default block max-w-96 p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">

        <div class="flex items-center justify-start">
          <svg t="1710663650068" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="26052" width="33" height="33">
            <path
                d="M755.5584 178.3296c38.5024 62.7712 60.7232 136.6016 60.7232 215.6032 0 228.1472-184.9344 413.0816-413.0816 413.0816-91.2896 0-175.616-29.696-244.0192-79.8208 72.6016 118.4256 203.264 197.4784 352.4096 197.4784 228.1472 0 413.0816-184.9344 413.0816-413.0816-0.0512-136.8576-66.6112-258.0992-169.1136-333.2608z"
                fill="#ffa115" p-id="26053"></path>
            <path
                d="M511.5392 67.7376c-244.736 0-443.8016 199.0656-443.8016 443.8016s199.0656 443.8016 443.8016 443.8016c244.736 0 443.8016-199.0656 443.8016-443.8016s-199.0656-443.8016-443.8016-443.8016z m0 826.2144c-210.8416 0-382.3616-171.52-382.3616-382.3616s171.52-382.3616 382.3616-382.3616c210.8416 0 382.3616 171.52 382.3616 382.3616s-171.52 382.3616-382.3616 382.3616z"
                fill="#474A54" p-id="26054"></path>
            <path
                d="M321.28 316.0064h-20.9408c-16.9472 0-30.72 13.7728-30.72 30.72s13.7728 30.72 30.72 30.72h20.9408c16.9472 0 30.72-13.7728 30.72-30.72s-13.7216-30.72-30.72-30.72zM718.6944 316.0064H420.6592c-16.9472 0-30.72 13.7728-30.72 30.72s13.7728 30.72 30.72 30.72h298.0352c16.9472 0 30.72-13.7728 30.72-30.72s-13.7728-30.72-30.72-30.72zM321.28 495.5648h-20.9408c-16.9472 0-30.72 13.7728-30.72 30.72s13.7728 30.72 30.72 30.72h20.9408c16.9472 0 30.72-13.7728 30.72-30.72s-13.7216-30.72-30.72-30.72zM718.6944 495.5648H420.6592c-16.9472 0-30.72 13.7728-30.72 30.72s13.7728 30.72 30.72 30.72h298.0352c16.9472 0 30.72-13.7728 30.72-30.72s-13.7728-30.72-30.72-30.72zM321.28 655.9232h-20.9408c-16.9472 0-30.72 13.7728-30.72 30.72s13.7728 30.72 30.72 30.72h20.9408c16.9472 0 30.72-13.7728 30.72-30.72s-13.7216-30.72-30.72-30.72zM718.6944 655.9232H420.6592c-16.9472 0-30.72 13.7728-30.72 30.72s13.7728 30.72 30.72 30.72h298.0352c16.9472 0 30.72-13.7728 30.72-30.72s-13.7728-30.72-30.72-30.72z"
                fill="#474A54" p-id="26055"></path>
          </svg>
          <h5 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white ml-2">分类</h5>
        </div>
        <p class="font-normal text-gray-700 dark:text-gray-400 justify-start flex text-5xl" style="margin-top: 10px">
          <CountTO :value="statisticsBaseInfo.categoryTotalCount"/>
        </p>
      </div>
      <div
          class="col-span-1  cursor-default block max-w-96 p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">

        <div class="flex items-center justify-start">
          <svg t="1710663754214" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="31504" width="33" height="33">
            <path
                d="M719.36 131.072l11.264 122.368c1.536 14.336 14.336 25.088 28.672 24.064 14.336-1.536 25.088-14.336 24.064-28.672l-11.264-122.368-52.736 4.608z"
                fill="#425768" p-id="31505"></path>
            <path d="M930.816 219.648l-329.728 0.512L532.48 365.568V965.12h467.456V365.568z" fill="#87C596"
                  p-id="31506"></path>
            <path
                d="M761.344 647.168c-3.584-1.024-7.168-2.56-10.752-4.608-3.584-1.536-10.24-5.12-19.968-10.752s-17.408-11.776-23.04-18.944c-5.632-7.168-10.24-14.336-13.312-22.016-3.072-7.68-4.096-15.872-3.584-25.088 0.512-15.36 4.608-26.624 12.288-34.816 7.68-8.192 14.848-14.336 22.528-18.432 7.68-4.096 14.848-7.168 22.528-8.704l13.312-3.072V488.448h16.896v12.8c4.608 0 8.192 0.512 10.752 0.512 3.072 0 6.144 1.024 10.24 1.536 4.096 1.024 11.264 2.56 20.992 5.632 9.728 2.56 17.92 8.192 24.576 15.872s9.728 14.848 9.728 20.992c0 6.656-3.072 12.8-8.704 17.408-5.632 5.12-12.288 7.168-19.456 7.68-7.68 0-13.824-2.048-18.944-7.168-5.12-4.608-7.68-10.24-7.168-16.384 0-5.12 2.048-9.728 5.632-14.336 3.584-4.096 5.632-6.656 5.632-7.68 0-2.048-3.072-4.096-8.704-6.656s-10.752-4.096-14.848-4.608l-10.24-1.024v94.208c8.192 3.072 17.408 6.656 27.136 10.24s18.944 7.168 27.136 11.264c8.192 4.096 15.872 10.24 22.528 18.944 6.656 8.704 10.24 17.92 10.24 27.648 0 9.728-1.536 18.944-4.096 27.136-3.072 8.192-7.168 15.36-12.8 21.504-5.632 6.144-11.776 10.752-18.944 14.336-6.656 3.072-13.824 6.144-20.992 7.68s-14.336 3.584-21.504 4.096l-9.216 1.024v14.336h-16.896v-14.336c-5.632-1.024-10.752-1.536-14.336-2.56-4.096-1.024-8.704-2.048-13.824-4.096-5.12-2.048-10.24-4.096-14.336-6.144s-8.704-5.12-13.312-8.192c-4.608-3.584-9.216-7.68-13.312-13.824s-6.656-11.264-6.656-17.408c0-6.144 1.024-11.264 2.56-15.36 2.048-4.608 5.12-8.192 9.216-10.752s8.704-3.584 14.848-3.584c6.656 0 11.776 2.048 15.872 5.12 4.096 3.072 6.656 7.168 6.656 11.264 0.512 4.096 0 7.68-1.024 9.728-1.024 2.048-2.56 3.584-4.096 5.12l-8.192 5.12c-2.048 1.536-3.584 3.072-4.608 5.12-1.024 2.048 1.536 6.144 7.168 11.776 4.096 4.096 8.704 7.68 13.312 9.728s8.704 4.096 11.776 4.096l11.776 2.048V647.168z m0-132.608c-4.096 1.024-7.68 2.048-11.264 3.072-3.584 1.024-7.68 3.072-11.264 6.144-4.096 3.072-7.68 7.168-10.752 13.312-3.072 5.632-4.608 12.288-4.096 18.944 0 9.728 2.56 17.408 7.68 23.552s11.776 11.264 19.968 15.36l9.728 5.12V514.56z m16.384 225.28c5.632-1.024 12.288-2.048 20.48-4.096 7.68-2.048 14.336-6.656 19.456-13.824 5.12-7.168 7.68-14.848 7.68-23.552 0-8.704-1.536-15.36-5.12-19.968s-8.192-8.704-14.848-12.288c-6.144-3.584-12.8-6.144-18.944-8.704l-9.216-3.584v86.016z"
                fill="#FFFFFF" p-id="31507"></path>
            <path d="M830.464 296.448l-253.952-210.432-145.92 68.096-382.976 461.824 359.936 298.496 382.976-461.824z"
                  fill="#87C596" p-id="31508"></path>
            <path d="M644.096 263.168m-30.208 0a30.208 30.208 0 1 0 60.416 0 30.208 30.208 0 1 0-60.416 0Z"
                  fill="#528963" p-id="31509"></path>
            <path
                d="M719.36 131.072l-78.848 94.72c-9.216 11.264-7.68 27.648 3.584 37.376 11.264 9.216 27.648 7.68 37.376-3.584l78.848-94.72-40.96-33.792z"
                fill="#425768" p-id="31510"></path>
            <path
                d="M427.008 517.12c-2.048-3.072-3.584-6.656-5.632-10.24-2.048-3.584-4.608-10.752-8.192-20.992-3.584-10.24-5.632-19.968-5.632-29.184 0-9.216 1.536-17.408 4.096-25.088 2.56-7.68 7.168-14.848 13.312-21.504 10.24-11.264 20.992-17.408 31.744-18.944 10.752-1.536 20.48-1.536 29.184 0 8.192 1.536 15.872 4.096 22.528 7.68l12.288 6.144 7.68-9.728 12.8 10.752-8.192 9.728c3.584 3.072 6.144 5.12 8.192 7.168 2.048 2.048 4.608 4.608 7.168 7.68 2.56 3.072 6.656 9.216 12.8 17.408s8.704 17.92 8.704 28.16-2.048 17.92-5.632 22.528c-4.608 5.12-10.24 7.68-17.92 8.192-7.168 0.512-13.824-2.048-19.968-6.656-6.144-4.608-9.216-10.752-10.24-17.408-1.024-6.656 1.024-12.8 5.12-17.408 3.584-4.096 7.68-6.656 13.312-7.168 5.632-1.024 8.704-1.536 9.216-2.56 1.024-1.536 0.512-5.12-2.56-10.24-2.56-5.632-5.632-9.728-8.704-13.312L525.312 424.96 465.408 496.64c4.096 7.68 9.216 15.872 14.336 25.088 5.12 9.216 9.728 17.92 13.824 26.112 3.584 8.192 5.632 17.92 5.12 29.184-0.512 11.264-3.584 20.48-9.728 28.16s-12.8 13.824-20.48 17.92c-7.68 4.608-15.36 7.168-23.552 8.704-8.192 1.024-16.384 0.512-23.552-1.024-7.168-2.048-14.336-4.096-21.504-7.168-6.656-3.072-13.312-6.656-18.944-10.752l-7.68-5.12-9.216 11.264-12.8-10.752 9.216-11.264c-4.096-4.096-7.168-8.192-9.728-11.264-2.56-3.072-5.12-7.168-7.68-12.288s-5.12-9.728-7.168-13.824c-2.048-4.608-3.584-9.728-4.608-14.848-1.536-5.632-2.048-11.776-1.536-18.944s2.048-13.312 5.632-17.92c3.584-4.608 7.68-8.192 11.776-10.24 4.608-2.048 9.216-3.072 13.824-2.56 4.608 0.512 9.216 2.56 13.824 6.656 5.12 4.096 8.192 9.216 9.216 14.336 1.024 5.12 0.512 9.728-2.048 13.312s-4.608 5.632-7.168 7.168c-2.048 1.024-4.096 1.536-6.656 1.024l-9.216-1.536c-2.56 0-4.608 0-7.168 1.024-2.048 1.024-3.072 5.632-2.048 13.824 0.512 5.632 2.048 11.264 4.096 16.384s4.096 8.704 6.656 10.752l7.68 9.216L427.008 517.12z m-46.592 81.92c5.12 3.072 11.264 6.144 18.432 9.728s15.36 4.096 24.064 2.048c8.704-2.048 15.36-6.656 20.992-12.8 5.632-6.656 8.704-12.8 8.704-18.944 0.512-6.144-1.024-12.288-3.584-18.944-2.56-6.656-5.632-12.8-8.704-18.944l-4.608-8.704-55.296 66.56z m131.072-184.32c-3.584-1.536-7.168-3.584-10.752-4.608-3.584-1.536-7.68-2.048-12.8-2.56-5.12 0-10.752 1.024-16.384 3.584-6.144 2.56-11.264 6.656-15.36 11.776-6.144 7.68-9.216 15.36-8.704 23.04 0 7.68 2.048 15.872 5.632 24.576l4.096 10.24L511.488 414.72z"
                fill="#FFFFFF" p-id="31511"></path>
          </svg>
          <h5 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white ml-2">标签</h5>
        </div>
        <p class="font-normal text-gray-700 dark:text-gray-400 justify-start flex text-5xl" style="margin-top: 10px">
          <CountTO :value="statisticsBaseInfo.tagTotalCount"/>
        </p>
      </div>
      <div
          class="col-span-1 cursor-default block max-w-96 p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
        <div class="flex items-center justify-start">
          <svg t="1710663814845" class="icon" viewBox="0 0 1177 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
               p-id="39196" width="33" height="33">
            <path
                d="M577.536 41.5744C153.4464 41.5744 17.92 523.8784 17.92 523.8784s129.024 482.4064 559.616 482.4064c383.8464 0 559.616-482.3552 559.616-482.3552S1031.5264 41.5744 577.536 41.5744z m0 825.6512c-192.7168 0-349.1328-154.1632-349.1328-344.064 0-189.952 156.416-344.1152 349.184-344.1152 192.6656 0 349.0816 154.112 349.0816 344.064 0 190.72-156.416 344.064-349.1328 344.064z"
                fill="#D0A357" p-id="39197"></path>
            <path
                d="M771.072 523.9296c0 104.9088-86.272 190.72-193.536 190.72-107.2128 0-193.536-85.0432-193.536-190.72s86.3232-190.72 193.536-190.72c0 0 37.12 124.7744 27.4432 158.1056 90.3168-21.4528 163.6864 24.6784 166.0928 32.6144z"
                fill="#D0A357" p-id="39198"></path>
          </svg>
          <h5 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white ml-2">总浏览量</h5>
        </div>
        <p class="font-normal text-gray-700 dark:text-gray-400 justify-start flex text-5xl" style="margin-top: 10px">
          <CountTO :value="statisticsBaseInfo.pvTotalCount"/>
        </p>
      </div>

      <!-- 表格显示 -->
      <div class="col-span-4 md:col-span-2">
        <div
            class="w-full h-full px-5 py-7 mb-3 bg-white border border-gray-200 shadow rounded-lg dark:bg-gray-800 dark:border-gray-700">
          <h2 class="flex items-center mb-2 font-bold text-gray-600 uppercase dark:text-white">
            <svg t="1708932215993" class="icon mr-3" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 p-id="23569" width="33" height="33">
              <path
                  d="M886.78 190.21H768v-33a54.92 54.92 0 0 0-54.86-54.86h-36.57a54.92 54.92 0 0 0-54.86 54.86v33.53h-220v-33.53a54.92 54.92 0 0 0-54.86-54.86h-36.54a54.92 54.92 0 0 0-54.86 54.86v33H137.22c-40.37 0-73.22 33.15-73.22 73.88v112.55h896V264.09c0-40.73-32.85-73.88-73.22-73.88zM365.17 208.5v58.43a18.31 18.31 0 0 1-18.29 18.28h-36.57A18.31 18.31 0 0 1 292 266.93V157.21a18.31 18.31 0 0 1 18.29-18.29h36.57a18.31 18.31 0 0 1 18.29 18.29z m366.26 0v58.43a18.31 18.31 0 0 1-18.29 18.28h-36.57a18.31 18.31 0 0 1-18.29-18.28V157.21a18.31 18.31 0 0 1 18.29-18.29h36.57a18.31 18.31 0 0 1 18.29 18.29zM64 847.77c0 40.73 32.85 73.88 73.22 73.88h749.56c40.38 0 73.22-33.14 73.22-73.88V413.21H64z m676.57-306.56a36.57 36.57 0 0 1 36.57-36.57h36.57a36.57 36.57 0 0 1 36.57 36.57v36.57a36.57 36.57 0 0 1-36.57 36.57h-36.57a36.57 36.57 0 0 1-36.57-36.57z m-182.86 0a36.57 36.57 0 0 1 36.57-36.57h36.57a36.57 36.57 0 0 1 36.57 36.57v36.57a36.57 36.57 0 0 1-36.57 36.57h-36.56a36.57 36.57 0 0 1-36.57-36.57z m0 182.86a36.57 36.57 0 0 1 36.57-36.57h36.57a36.57 36.57 0 0 1 36.57 36.57v36.57a36.57 36.57 0 0 1-36.57 36.57h-36.56a36.57 36.57 0 0 1-36.57-36.57zM374.86 541.21a36.57 36.57 0 0 1 36.57-36.57H448a36.57 36.57 0 0 1 36.57 36.57v36.57A36.57 36.57 0 0 1 448 614.36h-36.57a36.57 36.57 0 0 1-36.57-36.57z m0 182.86a36.57 36.57 0 0 1 36.57-36.57H448a36.57 36.57 0 0 1 36.57 36.57v36.57A36.57 36.57 0 0 1 448 797.21h-36.57a36.57 36.57 0 0 1-36.57-36.57z m-182.86 0a36.57 36.57 0 0 1 36.57-36.57h36.57a36.57 36.57 0 0 1 36.57 36.57v36.57a36.57 36.57 0 0 1-36.57 36.57h-36.57A36.57 36.57 0 0 1 192 760.64z"
                  fill="#22B573" p-id="23570"></path>
            </svg>
            近半年文章发布热点图
          </h2>
          <ArticlePublishCalendar :value="articlePublishInfo"/>
        </div>
      </div>

      <div class="col-span-4 md:col-span-2">
        <div
            class="w-full h-full px-5 py-7 mb-3 bg-white border border-gray-200 shadow rounded-lg dark:bg-gray-800 dark:border-gray-700">
          <h2 class="flex items-center mb-2 font-bold text-gray-600 uppercase dark:text-white">
            <svg t="1708949875867" class="icon mr-3" viewBox="0 0 1109 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 p-id="8325" width="33" height="33">
              <path
                  d="M0 1024v-85.504h1109.504V1024z m938.496-170.496h-768A171.008 171.008 0 0 1 0 682.496v-512A170.496 170.496 0 0 1 170.496 0h768a171.008 171.008 0 0 1 171.008 170.496v512a171.52 171.52 0 0 1-171.008 171.008z m3.072-566.272L921.6 213.504l-74.752 19.968-150.016 39.424 19.968 73.728 106.496-28.16-178.176 174.592-188.416-164.864-54.272-55.296-274.432 270.336 54.784 53.76 219.136-215.04 235.52 204.8 10.752 10.24 233.472-229.376 23.552 87.04 75.264-19.968-40.448-147.456z"
                  fill="#1296db" p-id="8326"></path>
            </svg>
            近一周访问总量
          </h2>
          <ArticlePVLineChat :value="weekPVCountInfo"/>
        </div>
      </div>
    </div>

  </main>
</template>
<script setup>
import {onMounted, reactive, ref} from "vue";
import {queryBaseStatisticsInfo, queryHotStatisticsInfo, queryWeekArticlePVCount} from "@/api/admin/statistics.js";
import ArticlePublishCalendar from "@/layouts/admin/components/ArticlePublishCalendar.vue";
import ArticlePVLineChat from "@/layouts/admin/components/ArticlePVLineChat.vue";
import CountTO from "@/components/CountTO.vue";

const statisticsBaseInfo = reactive({
  "articleTotalCount": 0,
  "categoryTotalCount": 0,
  "tagTotalCount": 0,
  "pvTotalCount": 0
})
let articlePublishInfo = reactive({})
let weekPVCountInfo = ref([])

onMounted(() => {
  getStatisticsBaseInfo()
  getArticlePublishInfo()
  getWeekArticlePVCount()
})

// 获取后台仪表盘基础统计信息
function getStatisticsBaseInfo() {
  queryBaseStatisticsInfo().then(resp => {
    if (resp.success) {
      statisticsBaseInfo.articleTotalCount = resp.data.articleTotalCount
      statisticsBaseInfo.categoryTotalCount = resp.data.categoryTotalCount
      statisticsBaseInfo.tagTotalCount = resp.data.tagTotalCount
      statisticsBaseInfo.pvTotalCount = resp.data.pvTotalCount
    }
  })
}

// 按日统计文章发布数据
function getArticlePublishInfo() {
  queryHotStatisticsInfo().then(resp => {
    if (resp.success) {
      articlePublishInfo = resp.data
    }
  })
}

// 查询近七日文章访问次数
function getWeekArticlePVCount() {
  queryWeekArticlePVCount().then(resp => {
    if (resp.success) {
      weekPVCountInfo = resp.data
    }
  })
}

</script>
